<template>
  <div>
    <el-card style="margin-bottom: 16px">
      <choose-time @startChange="startChange" @endChange="endChange">
      </choose-time>
    </el-card>
    <el-card>
      <el-switch
        v-model="dateType"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        active-value="daterange"
        inactive-value="date"
        active-text="范围选择"
        inactive-text="日期选择"
        @change="handleChange"
      />
      <ChooseDate :type="dateType" v-model:value="dateValue" v-if="visible">
      </ChooseDate>
    </el-card>
  </div>
</template>

<script lang="ts" setup>

interface endValue {
  startTime: string;
  endTime: string;
}

const startChange = (val: string) => {
  console.log(val);
};

const endChange = (val: endValue) => {
  console.log(val);
};

const dateType = ref("date");

const dateValue = ref<string | string[]>('')
watch(dateValue, (val) => {
  console.log('val: ', val);
})

const visible = ref(true);
const handleChange = () => {
  visible.value = false;
  nextTick(() => {
    visible.value = true;
  });
};
</script>

<style lang="scss" scoped>
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
